/*
 * #depends subsonic-store.js
 */
Ext.ux.mattgoldspink.VolumeSlider = Ext.extend(Ext.form.Slider, {
    constructor: function() {
        Ext.apply(this, {
            value: 100,
            minValue: 0,
            maxValue: 100,
            cls: 'volumeslider',
            height: 40,
            listeners: {
                change: function(slider, thumb, newValue, oldValue){
                    Ext.dispatch({
                        controller: 'Ext.ux.mattgoldspink.subsonic.controllers.Player',
                        action: 'setVolume',
                        volume: newValue
                    });
                }
            }
        });
        Ext.ux.mattgoldspink.VolumeSlider.superclass.constructor.call(this);
   }
});

Ext.ux.mattgoldspink.TrackPositionSlider = Ext.extend(Ext.form.Slider, {
    constructor: function() {
        Ext.apply(this, {
            value: 0,
            minValue: 0,
            maxValue: 100,
            cls: 'trackpositionslider',
            draggable: false
        });
        Ext.ux.mattgoldspink.TrackPositionSlider.superclass.constructor.call(this);
   }
});


Ext.ux.mattgoldspink.ControlButtonPanel = Ext.extend(Ext.Panel, {
    constructor: function() {
        Ext.apply(this, {
            html:  '<div class="backbutton button"></div><div id="mainplay" class="playstatebutton button"></div><div class="forwardbutton button"></div>',
            height: 50,
            cls: 'controlbuttons',
            listeners: {
                afterrender: this.registerListeners,
				body: {
					tap: this.handleTap,
					delegate: '.button',
					scope: this
				}
            }
        });
        Ext.ux.mattgoldspink.ControlButtonPanel.superclass.constructor.call(this);
   },
   handleTap: function(evt, el, options){
   		el = Ext.get(el);
		if (el.hasCls('playstatebutton')) {
			this.handlePlayTap(evt, el, options);
		} else if (el.hasCls('backbutton')) {
			this.handleBackButtonTap(evt, el, options);
		} else if (el.hasCls('forwardbutton')){
			this.handleForwardButtonTap(evt, el, options);
		}
   },
   handlePlayTap: function(evt, el, options){
		if ( el.hasCls('play')) {
			Ext.dispatch({
				controller: 'Ext.ux.mattgoldspink.subsonic.controllers.Player',
				action: 'pauseCurrent'
			});
			 el.removeCls('play');
		} else {
			Ext.dispatch({
				controller: 'Ext.ux.mattgoldspink.subsonic.controllers.Player',
				action: 'resumeCurrent'
			});
		    el.addCls('play');
		}
	},
	handleBackButtonTap: function(evt, el, options){
		Ext.dispatch({
			controller: 'Ext.ux.mattgoldspink.subsonic.controllers.Player',
			action: 'skipBackward'
		});
	},
	handleForwardButtonTap: function(evt, el, options){
		Ext.dispatch({
			controller: 'Ext.ux.mattgoldspink.subsonic.controllers.Player',
			action: 'skipCurrent'
		});
	},
	registerListeners: function() {
		this.playbutton = Ext.get(Ext.get(this.el).query('.playstatebutton')[0]);
		Ext.dispatch({
			controller: 'Ext.ux.mattgoldspink.subsonic.controllers.Player',
			action: 'registerPlayListener',
			listener: this
		});
   },
   onPlay: function(item) {
        this.playbutton.addCls('play');
   }
});

Ext.ux.mattgoldspink.SearchField = Ext.extend(Ext.form.FormPanel, {
    constructor: function() {
        Ext.apply(this, {
            cls: 'x-toolbar',
            items: [
                {
                    xtype: 'searchfield',
                    placeHolder: 'Search',
                    height: 40
                }
            ]
        });
        Ext.ux.mattgoldspink.SearchField.superclass.constructor.call(this);
   }
});

Ext.ux.mattgoldspink.PlayerBarCenter = Ext.extend(Ext.Panel, {
    buttonPanel:  new Ext.ux.mattgoldspink.ControlButtonPanel(),
    trackPositionSlider: new Ext.ux.mattgoldspink.TrackPositionSlider(),
    constructor: function(){
        Ext.apply(this, {
            items: [
               this.buttonPanel,
               this.trackPositionSlider
            ]
        });
        Ext.ux.mattgoldspink.PlayerBarCenter.superclass.constructor.call(this);
    }
});

Ext.ux.mattgoldspink.PlayerBar = Ext.extend(Ext.Panel, {
    volumeSlider: new Ext.ux.mattgoldspink.VolumeSlider(),
    playerBarCenter: new Ext.ux.mattgoldspink.PlayerBarCenter(),
    searchField: new Ext.ux.mattgoldspink.SearchField(),
    constructor: function(){
        
        Ext.apply(this, {
            cls: 'playerbar',
            layout: {
                type: 'hbox',
                align:  'center'
            },
            dock: 'top',
            defaults: {
                flex: 1 
            },
            items: [
                this.volumeSlider, 
                this.playerBarCenter,
                this.searchField
            ],
            height: 72
        });
        Ext.ux.mattgoldspink.PlayerBar.superclass.constructor.call(this);
        this.registerListeners();
    },
    registerListeners: function(){
        this.on('afterlayout', this.updateSliderProportions, this);
    },
    updateSliderProportions: function(){
        this.volumeSlider.onOrientationChange();
        this.playerBarCenter.buttonPanel.onOrientationChange();
    }
});